@charset "utf-8";
* { margin: 0; padding: 0; }
html, body { width: 100%; height: auto; margin: 0; padding: 0; font-size: 14px; background: #FFFFFF; color: #3e3e3e; overflow-x: hidden; }
body, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td, img { border: medium none; margin: 0; padding: 0; outline: none; }
body, button, input, select, textarea { font: 14px LatoLight, '微软雅黑', "Microsoft YaHei", tahoma, Srial, helvetica, sans-serif; outline: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; }
ul, ol, li { list-style: none; }
a { text-decoration: none; color: #7e7e7e }
a:hover { text-decoration: none; color: #3e3e3e }
p { margin: 0; }
img { border: 0px; display: block; }
table { border-spacing: 0px; border-collapse: collapse; }
tr { cursor: pointer; }
input { border: 0; }
textarea { resize: none; padding: 0; }
::selection { background: #1a96d4; color: #fff; }
::-moz-selection {
 background: #1a96d4;
 color: #fff;
}
.clear { clear: both; }
.scroll_cs { position: fixed; top: 0; color: #000; font-size: 36px; z-index: 999; left: 0; }
.Hover_off { cursor: url(../images/hover.ico), crosshair; }
.scrollbar { padding-right: 5px; height: 700px; overflow: auto; }
.scrollbar::-webkit-scrollbar {
 width: 5px;
 height: 10px;
}
.scrollbar::-webkit-scrollbar-button {
 background-color: #ababa7;
}
.scrollbar::-webkit-scrollbar-track {
 background: #ababa7;
}
.scrollbar::-webkit-scrollbar-track-piece {
 background: url(http://www.lyblog.net/wp/wp-content/themes/mine/img/stripes_tiny_08.png);
}
.scrollbar::-webkit-scrollbar-thumb {
 background: #1F99D6;
 border-radius: 4px;
}
.scrollbar::-webkit-scrollbar-corner {
 background: #82AFFF;
}
.scrollbar::-webkit-scrollbar-resizer {
 background: #FF0BEE;
}
/*****************************/
/*IEtips*/
.IEtips { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: url(../images/ieBG.png); display: none; }
.IEtips_Box { width: 1000px; background: #FAFAFA; height: 500px; position: absolute; left: 50%; top: 50%; margin: -250px 0 0 -500px; }
.IEtips .Browser { margin-top: 35px; }
.IEtips .IEtips_title { font-size: 36px; width: 80%; margin: 0 auto; padding-top: 35px; }
.IEtips .Browser ul { overflow: hidden; text-align: center; width: 80%; margin: 0 auto; }
.IEtips .Browser ul li { margin: 0 40px; text-align: center; width: 120px; float: left; }
.IEtips .Browser ul li img { width: 100px; margin: 0 auto; }
.IEtips .Browser ul li a, .IEtips .Browser ul li span { display: inline-block; margin-top: 25px; color: #2570e1; font-size: 16px; transition: all .5s; -webkit-transition: all .5s; }
.IEtips .Browser ul li a:hover { color: #800886; }
.IEtips .brn_off { background: url(../images/brn_off.png); height: 32px; width: 32px; position: absolute; top: 5px; right: 5px; cursor: pointer; }
/***mobile*********/
#navToggle { position: fixed; z-index: 102; top:30px; right: 30px; width: 35px; height: 33px; cursor: pointer; -webkit-transition: all ease 0.3s; transition: all ease 0.3s;}
#navToggle span { position: absolute; top: 0px; display: block; width: 35px; height: 3px; left: 0; border: 0px solid #ffba00; background-color: #ffba00; -webkit-transition: top 0.2s 0.2s, background 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s; transition: top 0.2s 0.2s, background 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s; transition: top 0.2s 0.2s, transform 0.2s, background 0.2s, opacity 0s 0.2s; transition: top 0.2s 0.2s, transform 0.2s, background 0.2s, opacity 0s 0.2s, -webkit-transform 0.2s; }
#navToggle span:nth-of-type(2) { top: 15px; }
#navToggle span:nth-of-type(3) { top: auto; bottom: 0; -webkit-transition: bottom 0.2s 0.2s, background 0.2s, -webkit-transform 0.2s; transition: bottom 0.2s 0.2s, background 0.2s, -webkit-transform 0.2s; transition: bottom 0.2s 0.2s, transform 0.2s, background 0.2s; transition: bottom 0.2s 0.2s, transform 0.2s, background 0.2s, -webkit-transform 0.2s; }
#navToggle.expanded:hover { border-color: #fff; }
#navToggle.expanded { border-color: #aaa; top:15px;}
#navToggle.expanded:hover span { transform: scale(0.9); }
#navToggle.expanded span:nth-of-type(1) { top: 15px; transform: rotate(45deg); transition: top 0.2s, transform 0.2s 0.2s, background 0.2s; -webkit-transform: rotate(45deg); -webkit-transition: top 0.2s, -webkit-transform 0.2s 0.2s, background 0.2s }
#navToggle.expanded span:nth-of-type(2) { opacity: 0; transition: opacity 0.2s; -webkit-transition: opacity 0.2s; }
#navToggle.expanded span:nth-of-type(3) { bottom: 15px; transform: rotate(-45deg); transition: bottom 0.2s, transform 0.2s 0.2s, background 0.2s; -webkit-transform: rotate(-45deg); -webkit-transition: bottom 0.2s, -webkit-transform 0.2s 0.2s, background 0.2s }
#mobileNav.expanded { display: block; top: 0; }
#mobileNav{position: fixed; top: 0; left: 0; width: 100%; z-index: 101; background: url(../images/logo.png) no-repeat 20px 12px; background-color: #fff; transform: translateY(-100%); -webkit-transform: translateY(-100%); transition: cubic-bezier(0.92, 0.1, 0.25, 1) .8s; -webkit-transition: cubic-bezier(0.92, 0.1, 0.25, 1) .8s; background-size: auto 40px;}
#mobileNav.cur { transform: translateY(0); -webkit-transform: translateY(0); }
#mobileNav ul { margin-top: 60px; background: #088fb1; }
#mobileNav ul li { line-height: 40px; font-size: 16px; text-align: center; }
#mobileNav ul li a { display: block; height: 100%; color: #fff; border-bottom: 1px solid #0b7d99; border-top: 1px solid #1bbbe3; }
#mobileNav ul li .nav2 { background: #12b7e0;height:0;overflow: hidden;transition:all .4s;-webkit-transition:all .4s;}
#mobileNav ul li:nth-child(2) .nav2.active{height: 82px;}
#mobileNav ul li:nth-child(5) .nav2.active{height: 123px;}
#mobileNav ul li:nth-child(6) .nav2.active{height: 123px;}
#mobileNav ul li .nav2.active { display: block; }
#mobileNav ul li .nav2 .nav2-list a { border-color: #29c0e8;}
#navToggle,#mobileNav{display: none;}

//混合
    @ease1:cubic-bezier(0.180, 1.650, 0.640, 0.920);
    @ease2:cubic-bezier(0.92, 0.1, 0.25, 1);
    .border-radius(@radius:50%){
        border-radius: @radius;
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
    }
    .transition(@property:all,@duration:.5s,@time-function:ease,@delay:0s){
        transition: @property @duration @time-function @delay;
        -webkit-transition: @property @duration @time-function @delay;
        -moz-transition: @property @duration @time-function @delay;
        -o-transition: @property @duration @time-function @delay;
    }
    .transition-delay(@time){
                transition-delay: @time;
        -webkit-transition-delay: @time;
           -moz-transition-delay: @time;
             -o-transition-delay: @time;
    }
    .transform(@angruments){
        -webkit-transform:@angruments;
            -ms-transform:@angruments;
             -o-transform:@angruments;
                transform:@angruments;        
    }
    .opacity(@opacity:0,@opacityie:0){
        opacity: @opacity;
        filter: alpha(opacity=@opacityie);
    }

    .animation(@name,@durationm,@timing-function,@delay,@iteration-count,@direction){
        animation:@name @durationm @timing-function @delay @iteration-count @direction;
        -webkit-animation:@name @durationm @timing-function @delay @iteration-count @direction;
    }
    #Frames(@name;@frames){
        @-webkit-keyframes @name {
          @frames(); 
        }
        @-moz-keyframes @name {
          @frames(); 
        }
        @-o-keyframes @name {
          @frames(); 
        } 
        @keyframes @name {
          @frames(); 
        }
    }
    //通用浏览器兼容性
    .browser(@a,@b){
        @{a}:@b;
        -webkit-@{a}:@b;
        -moz-@{a}:@b;
        -o-@{a}:@b;
    }
    .browser1(@a,@b){
        @{a}:@b;
        @{a}:~'-webkit-@{b}';
        @{a}:~'-moz-@{b}';
        @{a}:~'-o-@{b}';
    }
    .flex(){
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        display: -o-flex;
    }
    .blur(@blur){
        filter:blur(@blur);
        -webkit-filter:blur(@blur);
    }
  
nav{
    position: fixed;
    right: 50px;
    top:50%;
    .transform(translateY(-50%));
    z-index: 101;
    color:#fff;
    .opacity(.8,80);
    ul{
        li{
            position: relative;
            text-align: right;
            height: 40px;
            line-height: 40px;
            width: 120px;
            margin: 50px 0;
            overflow: hidden;
            cursor: pointer;
            .num{
                font-family:Adorable;
                font-style: italic;
                font-size: 22px;
                position: absolute;
                left: 85px;
                .transition(all,.5s,ease-out,0s);
            }
            .cn{
                font-family: "方正细圆简体";
                font-size: 16px;
                position: relative;
                right: -85px;
                .transition(all,.5s,ease-out,0s);
            }
            &:after{
                content: "";
                position: absolute;
                width: 70px;
                height: 1px;
                bottom: 0;
                right: 0;
                background: #fff;
                .opacity(.8,80);
                .transition(all,.5s,ease-in-out,0s);
            }   
             
            &.active,&:hover{
                .num{
                    font-size: 40px;
                    color:#ffc527;
                    left: -3px; 
                }
                .cn{
                    right: 5px;
                    color: #ffc527;
                }
                &:after{
                    width: 126px;
                    height: 2px;
                    background: #ffc527;
                    .opacity(1,100);
                }   
            }    
        }
        
    }
}
/*Tits*/
.Tits{
    text-align: center;
    padding:30px;
    span{
        display: block;
        font-family: "微软雅黑";
        &.en{
            font-size: 40px;
            color:#ffba00;
            position: relative;
            margin-bottom:40px; 
            text-transform:uppercase;
            &:after{
                content: "";
                position: absolute;
                width: 20px;
                height: 4px;
                background: #FFF;
                left: 50%;
                margin-left: -10px;
                bottom:-20px;
            }     
        }
        &.cn{
            font-size: 32px;
            color:#cdcdcd;
        }
    }
    
}

body{
    overflow: hidden;
    height: 100vh;
}
/*home-body*/
.home-body{
    position: relative;
    .banner{
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background-repeat: no-repeat;
        background-size:100% 100%;
    }
    .banner1{
        perspective: 2500px;
        -webkit-perspective: 2500px;
        .banner1-text{
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 6;
            background: url(../images/banner1-text.png) no-repeat center center;
            background-size: 66vw auto;
            .transition();
            &.anim{
                .transform(translate3d(0,0,1000px));
                .opacity(0,0);
            }
        }
        .logo-b1{
            position: absolute;
            width: 100%;
            height: 100%;
            background: url(../images/logo-b1.png) no-repeat center center;
            z-index: 5;
            .animation(rotateLogo,2.5s,ease,.5s,infinite,normal);
        }
        #Frames(rotateLogo;@rotate);
        @rotate:{
            0%{
                .transform(scale(1));
            }
            5%{
                .transform(scale(1.2)); 
            }
            100%{
                .transform(scale(1)); 
            }
        };
        .round{
            overflow: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            .transform(translate(-50%,-50%));
            .border-radius(50%);
            border: 1px solid rgba(255, 255, 255, 0.3);
            .bg{
                background:url(../images/banner-index1.jpg) no-repeat center center;
                background-size: cover;
                .opacity(0,0);
                height: 100vh;
                width: 100vw;
                position: absolute;
                top: 50%;
                left: 50%;
                .transform(translate(-50%,-50%));
                .browser(transition,all .4s ease);
                &.bg-1{
                    background-image: url(../images/banner-index1.jpg);
                }
                &.bg-2{
                    background-image: url(../images/banner-index1.jpg);
                }
                &.bg-3{
                    background-image: url(../images/banner-index1.jpg);
                }
            }
            &.round1{
                width: 133vw;
                height: 133vw;
                z-index: 1;
                .bg{
                    .transition-delay(.3s);
                }
            }
            &.round2{
                width: 100vw;
                height: 100vw;
                z-index: 2;
                .bg{
                    .transition-delay(.2s);
                }
            }
            &.round3{
                width: 66vw;
                height: 66vw;
                z-index: 3;
                .bg{
                    .transition-delay(.1s);
                }
            }
            &.round4{
                width: 33vw;
                height: 33vw;
                z-index: 4;
                .bg{
                    .transition-delay(0s);
                }
            }
        }
        .B1-silder.s1{ 
            .bg-1{
                .opacity(1,100);
                .transform(translate(-50%,-50%) scale(1.2));
            }
            .bg-2{
                .transform(translate(-50%,-50%) scale(1));
            }
            .bg-3{
                .transform(translate(-50%,-50%) scale(1.4));
            }
        }
        .B1-silder.s2{
            .bg-2{
                .opacity(1,100);
                .transform(translate(-50%,-50%) scale(1.2));
            }
            .bg-3{
                .transform(translate(-50%,-50%) scale(1));
            }
            .bg-1{
                .transform(translate(-50%,-50%) scale(1.4));
            }
        }
        .B1-silder.s3{
            .bg-3{
                .opacity(1,100);
                .transform(translate(-50%,-50%) scale(1.2));
            }
            .bg-2{
                .transform(translate(-50%,-50%) scale(1.4));
            }
            .bg-1{
                .transform(translate(-50%,-50%) scale(1));
            }
        }
    }
    /*banner2*/
    .banner2{
        background: url(../images/banner-index2.jpg) no-repeat;
        background-size: 100% 100%;
        .Tits{
            margin-top: 60px;
        }
        .b2-container{
            /*进场动画  in the animation*/
            &.anim{
               margin-top:30%;
               .opacity(0,0);
            }
            width: 1400px;
            height: 450px;
            margin: 60px auto 0;
            position: relative;
            .opacity(1,100);
            .transition(all,1s,@ease1,.6s);
            .banner2-box{
                width: 100%;
                height: 100%;
                margin-left: -60px;
                .swiper-slide{
                    cursor: pointer;
                    text-align: center;
                    position: relative;
                    .blur(3px);
                    .img-box{
                        .flex;                      
                        height: 70px;
                        .browser(justify-content,center);
                        .browser(align-items,center);
                        margin-top: 190px;
                        .transition(all,.5s,ease,0s);
                        img{
                            display: inline-block;
                        }
                    }
                    .texts{
                        text-align: justify;
                        padding: 10px;
                        color: #fff;
                        font-size: 14px;
                        line-height: 24px;
                        letter-spacing:1px;
                        margin-top: 30px;
                        .opacity(0,0);
                        .transition(all,1s,ease,0s);
                    }
                    &.active{
                        .blur(0px);
                        .img-box{
                            margin-top: 0;
                        }
                        .texts{
                            margin-top: 0;
                            .opacity(1,100);
                        }
                    }
                }
            }
            .swiper-pagination{
                display: none;
                bottom: 20px;
                .swiper-pagination-bullet{
                    background:#fff;
                    .opacity(.4,40);
                    margin: 0 5px;
                    &-active{
                        background: #FFB200;
                        .opacity(1,100);
                    }
                }
            }
            .swiperB2-next,.swiperB2-prev{
                position: absolute;
                width: 28px;
                height: 28px;
                top:50%;
                margin-top: -14px;
                left:-100px;
                background: url(../images/left-arrow.png) no-repeat center center;
            }
            .swiperB2-next{
                background-image:url(../images/right-arrow.png) ;
                left:auto;
                right: 20px;
            }
        }
    }
    /*banner3*/
    .banner3{
        background:url(../images/ab-bg.jpg);
        overflow: hidden;
        position: relative;
         //detail page
        .B3_detail{
            width: 100%;
            height: 100%;
            background:url(../images/ab-bg.jpg);
            background-size: auto 100% ;
            position: fixed;
            top: 0;
            left: 100%; 
            overflow: hidden;
            z-index: 105;
            .transition(all,1s,@ease2,0s);
            &.active{
                left: 0;
            }
            .in-logo{
                position: absolute;
                right: 60px;
                top: 60px;
            }
            .detail-off{
                cursor: pointer;
                position: absolute;
                width: 90px;
                height: 40px;
                background-color: #d7a010;
                right: 0;
                bottom: 60px;
                overflow:hidden; 
                z-index:10; 
                &:after{
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top:0;
                    left: 0;
                    background: url(../images/off.png) no-repeat center center;
                    .transition();                                        
                }
                &:hover:after{
                    .transform(rotate(270deg));
                }
            }
            .box-img{
               width:60%;
               position: absolute;
               top: 0;
               left: 0;
               z-index: 5;
               height:100%;
               overflow: hidden;
               .img{
                   width: 100%;
                   height: 100%;
                   display: block;
               }
            }
            .box-text{
               width: 50%;
               height: 100%;
               position: absolute;
               top:0;
               right: 0;
               z-index: 6;
               padding-left:12%;
               padding-right:6%;  
               padding-top:14%; 
               font-size: 14px;
               line-height: 32px;
               color:rgba(255,255,255,.6);
               &:after{
                   content: "";
                   width: 20%;
                   height: 200%;
                   background: url(../images/ab-bg.jpg);
                   z-index: -1;
                   position: absolute;
                   top:-50%;
                   left: 10%;
                   .transform(rotate(10deg));
               }
               .tit{
                    margin-bottom:60px;
                    span{
                       display: inline-block;
                       height: 44px;
                       line-height: 44px;
                       font-size: 0;
                        &.cn{
                            font-size: 40px;
                            color:#fff;
                            padding-left: 100px;
                            position: relative;
                            &:after{
                               position: absolute;
                               left:0;
                               bottom: -10px;
                               content: "";
                               background: url(../images/KTV.png) no-repeat left center;
                               width: 101px;
                               height: 80px;
                               background-size: 100% 100%;
                            }
                            &.c2:after{
                                background-image: url(../images/JB.png);
                            }
                            &.c3:after{
                                background-image: url(../images/WT.png);
                            }
                            &.c4:after{
                                background-image: url(../images/HY.png);
                            }
                            &.c5:after{
                                background-image: url(../images/JTYY.png);
                            }
                        }
                        &.en{
                           text-transform: uppercase;
                           font-size:24px;
                           color:#c59735;
                           position: relative;
                           margin-left: 34px;
                            &:after{
                               content: "";
                               position: absolute;
                               left: -20px;
                               top:50%;
                               margin-top: -3px;
                               width: 6px;
                               height: 6px;
                               .border-radius();
                               background: #b6b6b6;
                             }
                        }
                   }   
               }
               .text1{
                   margin-bottom: 50px;
               }
               .text2{
                   width: 300px;
                   p{
                       width: 49%;
                       display: inline-block;
                   }
               }
               .B3Text-page{
                   visibility: hidden;
               }
               .B3Text-prev,.B3Text-next{
                   width: 50px;
                   height: 50px;
                   margin-top: -25px;
                   background: url(../images/detail_l.png) no-repeat center center;
                   background-size: 100% 100%;
                   left: 15%;
               }
               .B3Text-next{
                   left: auto;
                   right: 5%;
                   background-image: url(../images/detail_r.png);
               }
            }
            
            
        }
        
        .boxs{
            &.anim{
              li:nth-child(1) .li-box,li:nth-child(3) .li-box,li:nth-child(5) .li-box{
                  background-position:0 1000px;
                  &:after{
                      background-position:0 1000px;
                  }
              }
              li:nth-child(2) .li-box,li:nth-child(4) .li-box{
                  background-position:0 -1000px;
                   &:after{
                      background-position:0 -1000px;
                  }
              }
            }
            height: 100%;
            width: 150%;
            position: relative;
            z-index: 100;
            left:-10%;
            .transition();
            li{
//              &:after{
//                  content: "";
//                  position: absolute;
//                  width: 100%;
//                  height: 100%;
//                  z-index: -1;
//                  background:rgba(0,0,0,.2);
//                  top:0;
//                  left: 0;
//              }
                width: 16%;
                height: 100%;
                float: left;
                .transform(skewX(-20deg));
                .transition(all,1s,@ease1,0s);
                cursor: pointer;
                overflow: hidden;
                position:relative;
                .li-box{
                    text-shadow:1px 1px 7px #333;
                    background-repeat: no-repeat;
                    background-size:auto 100%;
                    background-position:30% 0;
                    .transform(skewX(20deg) translateX(-22%));
                    .browser(filter,grayscale(100%));
                    width: 200%;
                    height: 100%;
                    position: relative;
                    .transition();
                    &:after{
                        content: "";
                        display: block;
                        position: absolute;
                        z-index: -1;
                        top:0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        background:url(../images/model-bg.png);     
                        .transition(all,1s,ease,0s);         
                    }
                    .more{
                        position: absolute;
                        width: 125px;
                        height: 125px;
                        display: block;
                        text-align: center;
                        background:url(../images/b2-more.png) no-repeat;
                        z-index: 0;
                        top:50%;
                        left: 50%;
                        margin-left: -125px;
                        margin-top: -62px;
                        .opacity(0,0);
                        .transition();
                    }
                    .content{
                        display: none;
                        position: absolute;
                        width:500px;
                        left:25%;
                        bottom: 100px;
                        .cn{
                            font-size: 40px;
                            color:#fff;
                            position: relative;
                            margin-right: 25px;
                            &:after{
                                content: "";
                                width: 6px;
                                height: 6px;
                                .border-radius();
                                position: absolute;
                                right: -18px;
                                top:49%;
                                background-color:rgba(255,255,255,.6);
                            }
                        }
                        .en{
                            font-size: 30px;
                            color:#ffba00;
                            .opacity(.56,56);
                            text-transform: uppercase;
                        }
                        .text{
                            margin-top: 20px;
                            font-size: 14px;
                            line-height: 30px;
                            color:rgba(255,255,255,1);
                        }
                    }
                }
                &:nth-child(1){
                    .li-box{
                        background-image:url(../resources/fn1.jpg);
                    }
                }
                &:nth-child(2){
                    .li-box{
                        background-image:url(../resources/fn3.jpg);
                    }
                }
                &:nth-child(3){
                    .li-box{
                        background-image:url(../resources/fn4.jpg);
                    }
                }
                &:nth-child(4){
                    .li-box{
                        background-image:url(../resources/fn2.jpg);
                    }
                }
                &:nth-child(5){
                    .li-box{
                        background-image:url(../images/b2-bg5-hover.jpg);
                    }
                }
            }
            &.a1{
                left:-10%;
                li:nth-child(1){
                    width:28%;
                    .li-box{
                        &:after{
                            .opacity(0,0);
                        }
                        .browser(filter,grayscale(0));
                        .more{
                            .opacity(1,100);
                            left:55%;
                        }
                        .content{
                            display: block;
                            top:100px;
                            bottom: auto;
                            left:40%;
                        }
                    }
                }
            }
            &.a2{
                left:-15%;
                li:nth-child(2){
                    width:28%;
                    
                    .li-box{
                        &:after{.opacity(0,0);}
                        .browser(filter,grayscale(0));
                        .more{
                            .opacity(1,100);
                        }
                        .content{
                            display: block;
                        }
                    }
                }
            }
            &.a3{
                 left:-19%;
                li:nth-child(3){
                    width:28%;
                    .li-box{
                        &:after{.opacity(0,0);}
                        .browser(filter,grayscale(0));
                        .more{
                            .opacity(1,100);
                        }
                        .content{
                            display: block;
                        }
                    }
                }
            }
            &.a4{
                 left:-23%;
                li:nth-child(4){
                    width:28%;
                    .li-box{
                        &:after{.opacity(0,0);}
                        .browser(filter,grayscale(0));
                        .more{
                            .opacity(1,100);
                        }
                        .content{
                            display: block;
                        }
                    }
                }
            }
            &.a5{
                left:-28%;
                li:nth-child(5){
                    width:28%;
                    .li-box{
                        &:after{.opacity(0,0);}
                        .browser(filter,grayscale(0));
                        .more{
                            .opacity(1,100);
                            left:45%;
                        }
                        .content{
                            display: block;
                        }
                    }
                }
            }
        }
    }
    /*banner4*/
    .banner4{
        //detail page
        .B4_detail{
            width: 100%;
            height: 100%;
            overflow: hidden;
            background:url(../images/banner-index4.jpg) no-repeat center center;
            background-size: auto 100% ;
            position: fixed;
            top: 0;
            left: 100%; 
            z-index: 105;
            .transition(all,1s,@ease2,0s);
            &.active{
                left: 0;
            }
            .detail-off{
                cursor: pointer;
                position: absolute;
                width: 90px;
                height: 40px;
                background-color: #d7a010;
                right: 0;
                bottom: 60px;
                overflow:hidden; 
                z-index:3; 
                &:after{
                    content: "";
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top:0;
                    left: 0;
                    background: url(../images/off.png) no-repeat center center;
                    .transition();                                        
                }
                &:hover:after{
                    .transform(rotate(270deg));
                }
            }
            .margin-box{
                width: 1200px;
                height: 600px;
                margin: 0 auto;
                position: relative;
                .content-box{
                    &.cur{display: block;}
                    display: none;
                    height: 100%;
                    .swiper-slide{
                        width: 33.3%;
                        height: 45%;
                        z-index: 1;
                        margin: 12% 0 15%;
                        img{.opacity(.6,60);width: 100%;height: 100%;}
                        .transition(all,.6s,ease,0s);
                        span{
                            display: none;
                            position: absolute;
                            right: 0;
                            bottom: 30px;
                            padding:5px 12px;
                            font-size: 12px;
                            color: #fff;
                            text-align: center;
                            display: block;
                            background: #e9ae0a;
                        }
                        &:after{
                            position: absolute;
                            content: "";
                            width: 100%;
                            height: 100%;
                            top:0;
                            left:0;
                            background:url(../images/model-bg.png);
                        }
                        &.swiper-slide-active{
                            .transform(scale(2));
                            z-index: 2;
                            img{.opacity(1,100);width: 100%;height: 100%;}
                            &:after{
                                display: none;
                            }
                            span{
                                display: block;
                            }
                        }
                    }
                    .an1-page{
                        bottom: 0;
                        .swiper-pagination-bullet{
                            width: 12px;
                            height: 12px;
                            background: transparent;
                            border:2px solid #544f53;
                            margin: 10px;
                            opacity: 1;
                            &.swiper-pagination-bullet-active{
                                background: #FFB800;
                                border-width: 0;
                            }
                        }
                    }
                }
                .an1-next, .an1-prev{
                    width: 58px;
                    height: 58px;
                    background: url(../images/detail_l.png) no-repeat;
                    margin-top: -29px;
                    background-size:100%;
                    left:10%;
                }
                .an1-next{
                    background: url(../images/detail_r.png) no-repeat;
                    right: 10%;
                    left: auto;
                }
            }
            .B4-nav{
                position: absolute;
                right: 60px;
                top:50%;
                z-index: 1;
                margin-top: -120px;
                li{
                    cursor:pointer;
                    .opacity(.4,40);
                    height: 40px;
                    line-height: 40px;
                    color:#ffb800;
                    text-align: right;
                    position: relative;
                    &:hover{
                        .opacity(1,100);
                    }
                    &:after{
                        position: absolute;
                        content: "";
                        display: block;
                        top:50%;
                        right:-16px;
                        margin-top: -5px;
                        width: 10px;
                        height: 10px;
                        border:1px solid #FFB800;
                        .border-radius();
                    }
                    &.active{
                        .opacity(1,100);
                        &:after{
                            background:#FFB800;
                        }
                    }
                }
            }
        }
        
        background-image:url(../images/banner-index4.jpg) ;
        .Tits{
            margin:40px auto;
        }
        .content{
            width: 1400px;
            height: 500px;
            margin:0 auto;
            position: relative;
            ul{ 
                width:100%;
                height: 100%;
                bottom: 0;
                left: -7%;
                position: absolute;
                &.anim{
                    .S{
                        .transform(translate3d(0,0,1000px));
                        .opacity(0,0);
                    }
                }
                li{
                    perspective:2500px;
                    -webkit-perspective: 2500px;
                    position: absolute;
                    bottom: 3px;
                    left: 116px;
                    .transform(rotate(45deg));
                    &.l2{
                       left:419px;
                    }
                    &.l3{
                       left:722px;
                    }
                    &.l4{
                       left:1025px;
                    }
                    &.l5{
                       left:1328px;
                    }
                    .S{
                        cursor: pointer;
                        width: 200px;
                        height: 200px;
                        margin: 5px;
                        margin-bottom: 15px;
                        position:relative; 
                        background-color:rgba(255,255,255,.5); 
                        .transition(all,.6s,ease,0s);
                        &:after{
                            content: "";
                            display: none;
                            position: absolute;
                            width: 210px;
                            height: 210px;
                            border:2px solid #ffb200;
                            top:-5px;
                            left:-5px;
                            z-index: -1;
                        }
                        &.hover{
                            .transform(rotateX(360deg)); 
                            .transition(all,.7s,ease,0s);
                            background-color:rgba(255,255,255,.85);
                            &:after{
                                display: block;
                            }
                        }
                        &.none{
                            visibility: hidden;
                        }
                        >div{
                            width: 100%;
                            height: 100%;
                            overflow:hidden; 
                            .transition();
                            .t-box{
                                width: 100%;
                                height: 100%;
                                .transform(rotate(-45deg));
                                text-align: center;
                                padding-top: 70%;
                                color:rgba(0,0,0,.8);
                                background:url(../images/service01.png) no-repeat center 40%;
                                a{
                                    color:#f7f7f7;
                                }
                                a:hover{
                                    color:#f7f7f7;
                                }
                                .num{
                                    position: absolute;
                                    font-size: 80px;
                                    right: 0;
                                    bottom: 0;
                                    color:#767676;
                                    .opacity(.4,40);
                                }
                            }
                        }
                        &.s1{
                           .t-box{background-image: url(../images/service01.png);}
                           &.hover{
                               .t-box{background-image: url(../images/service01-hover.png);}
                           }
                        }
                        &.s2{
                           .t-box{background-image: url(../images/service02.png);}
                           &.hover{
                               .t-box{background-image: url(../images/service02-hover.png);}
                           }
                        }
                        &.s3{
                           .t-box{background-image: url(../images/service03.png);}
                           &.hover{
                               .t-box{background-image: url(../images/service03-hover.png);}
                           }
                        }
                        &.s4{
                           .t-box{background-image: url(../images/service04.png);} 
                           &.hover{
                               .t-box{background-image: url(../images/service04-hover.png);}
                           }
                        }
                        &.s5{
                           .t-box{background-image: url(../images/service05.png);}
                           &.hover{
                               .t-box{background-image: url(../images/service05-hover.png);}
                           } 
                        }
                        &.s6{
                           .t-box{background-image: url(../images/service06.png);} 
                           &.hover{
                               .t-box{background-image: url(../images/service06-hover.png);}
                           }
                        }
                        &.s7{
                           .t-box{background-image: url(../images/service07.png);} 
                           &.hover{
                               .t-box{background-image: url(../images/service07-hover.png);}
                           }
                        }
                        &.s8{
                           .t-box{background-image: url(../images/service08.png);}
                           &.hover{
                               .t-box{background-image: url(../images/service08-hover.png);}
                           } 
                        }
                        &.s_more{
                            background-color:#e0a507;
                            a{
                                display: block;
                                height: 100%;
                            }
                           .t-box{
                               background-image: url(../images/service-more.png);
                               .opacity(.8,80);
                               .text{
                                   color:#fff;
                               }
                           } 
                        }
                    }
                    
                }
            }
        }
        
    }
    /*banner5*/
    .banner5{ 
        &.anim{
            .ab{
                .transform(translateY(60%));
                .opacity(0,0);
            }
            .video{
                .transform(translateX(-60%));
                .opacity(0,0);
            }
        }
        overflow: hidden;
        background-image:url(../images/ab-bg.jpg);
        .video{
            float:left;
            width: 45%;
            height: 100%;
            position: relative;
            overflow: hidden;
            .transition(all,.6s,ease,.5s);
            video{
                width: 200%;
                margin-left: -50%;
                height: 100%;
            }
            img{
                width: 100%;
                height: 100%;
            }
            &:before{
                position: absolute;
                content: "";
                width:100%;
                height: 100%;
                top:0;
                left:0;
                background: rgba(0,0,0,.2);
            }
            .after{
                position: absolute;
                width: 105px;
                height: 105px;
                top:50%;
                margin-top: -52px;
                left:50%;
                margin-left: -52px;
                background:url(../images/video-play.png) no-repeat center center;
                cursor: pointer;
                z-index: 5;
            } 
            &.play .after{
                display: none;
            }
            &.play:before{
                display: none;
            }
        }
        .ab{
            .transition(all,1s,cubic-bezier(0.180, 1.650, 0.640, 0.920),.5s);
            width: 55%;
            height: 100%;
            padding: 50px;
            padding-right: 220px;
            float: right;
            color:#bcbcbc;
            font-size: 16px;
            line-height: 40px;
            .Tits .en:after{
                background:#828282;
            }
            .texts{
                margin-top: 20px;
                text-indent: 2em;
                text-align: justify;
                p{
                    margin-top: 10px;
                }
            }
        }
    }
     
}
footer{
    height: 128px;
    background: url(../images/footer.jpg) no-repeat center bottom;
    background-size: cover;
    position: relative;
    color:#d8d8d8;
    font-size: 12px;
    line-height: 24px;
    a{
        color:#d8d8d8;
    }
    a:hover{
        color:#e6e6e6;
    }
    &:after{
        content: "";
        background:#434343;
        position: absolute;
        width: 100%;
        height: 1px;
        left: 0;
        bottom: 10px;
    }
    >div{
        height:100%;
        .foot-logo{
            height: 100%;
            background: url(../images/logo-footer.png) no-repeat right center;
            
        }  
        .foot-box{
            height: 100%;
            .flex();
            .browser(flex-flow,column);
            .browser(align-items,flex-start);
            .browser(justify-content,center);
            &.box3{
                img{
                    display: inline-block;
                    margin-left: 15px;
                }
            }
            &.box4{
                .browser(align-items,flex-end)
            }
        } 
    }
}
/*通用遮罩*/
.model_black{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 100%;
    top:0;
    z-index:104;
    background: rgba(0,0,0,.8);
    .transition(all,1s,@ease2,0s);
    &.active{
        left: 0;
    }
}


/*Width<1700px pc*/
@media screen and (max-width:1700px){
    /*home-body*/
    .home-body{
        .banner2 .b2-container{
            width: 1200px;
            height: 465px;
        }
        .banner3 .boxs{
            left:-14%;
            li{
                width: 17%;
                .li-box .content{
                    left:24%;
                    width: 430px;
                }
            }
            &.a1{
                left:-14%;
                li:nth-child(1) .li-box .content{
                    left:43%;
                }
            }
            &.a2{
                left:-18%;
            }
            &.a3{
                left:-22%;
            }
            &.a4{
                left:-26%;
            }
            &.a5{
                left:-30%;
                li:nth-child(5) .li-box .content{
                    left:21%;
                }
            }
        }
        .banner4 .content{
            width: 1100px;
            ul{
                left: -10%;
                li{
                    bottom: 50px;
                    left: 88px;
                    &.l2{
                       left:333px;
                    }
                    &.l3{
                       left:578px;
                    }
                    &.l4{
                       left:823px;
                    }
                    &.l5{
                       left:1068px;
                    }
                    .S{
                        width: 160px;
                        height: 160px;
                        &:after{
                            width: 170px;
                            height: 170px;
                        }        
                    }
                }
            }
        }
    }
    
}
/*width<1450px pc*/
@media screen and (max-width:1450px){
    .Tits{
        span.en{
            font-size: 35px;
            margin-bottom: 20px;
            &:after{
                bottom: -12px;
            }
        }
        span.cn{
            font-size: 24px;
        }
    }
    /*home-body*/
    .home-body{
        .banner2{
            .Tits{
                margin-top: 30px;
            }
            .b2-container{
                width: 1000px;
                margin-top: 0;
                .swiperB2-next{
                    right: 0px;
                }
                .swiperB2-prev{
                    left: -150px;
                }
            }
        }
        .banner3 .B3_detail .box-text{
            .B3Text-next{
                right: 4%;
            }
            .tit span{
                &.en{
                    font-size: 22px;
                }   
                &.cn{
                    font-size: 32px;
                }
            }
        }
        .banner3 .boxs{
            li{
                .li-box .content{
                    left:24%;
                    width: 350px;
                    bottom:50px;
                    .cn{
                        font-size: 32px;
                    }
                    .en{
                        font-size: 24px;
                    }
                }
            }
            &.a1{
                li:nth-child(1) .li-box .content{
                    left:43%;
                    top:50px
                }
            }
            &.a5{
                li:nth-child(5) .li-box .content{
                    left:21%;
                }
            }
        }
        .banner4{
            .Tits{
                margin: 30px auto 0;
            } 
            .content ul{
                bottom: 15%;
            }
            .B4_detail{
                .margin-box{
                    width: 1000px;
                    height: 500px;
                }
            }
        }
        .banner5{
            .ab{
                padding:0 200px 20px 30px;
                line-height: 32px;
                .texts p{
                    margin-top: 5px;
                }
            }
            .Tits{
                padding-bottom: 0;
            }
        }
    }
}
/*ipad across*/
@media screen and (max-width:1024px){
    body{overflow: visible;height: auto;}
    .home-body{height:auto}
    #navToggle,#mobileNav{display: block;}
    #navToggle span{background-color:rgba(255,255,255,.8)}
    #mobileNav{background-color:rgba(0,0,0,.7)}
    #mobileNav ul{background-color: transparent;}
    #mobileNav ul li a{border-color:transparent;}
    nav{display: none;}
    
    /*home-body*/
    .home-body{
        /*banner2*/
        .banner2 .b2-container{
            width: 80%;
            margin-top: 20px;
            .banner2-box{
                margin: 0;
                .swiper-slide{
                    .blur(0);
                    .img-box{
                        margin-top: 0;
                    }
                    .texts{
                        .opacity(1,100);
                        margin-top:50px;
                    }
                    &.active .texts{
                        margin-top: 50px;
                    }
                }
            }
            .swiper-pagination{
                display: block;
            }
            .swiperB2-next{
                right: -50px;
            }
            .swiperB2-prev{
                left:-50px;
            }
        }
        /*banner3*/
        .banner3{
            height: 600px;
             /*B3_detail*/
            .B3_detail{
                top:50%;
                height: 600px;
                margin-top: -300px;
                .in-logo{
                   right: 40px;
                   top: 40px;
                   width: 120px;
                }
                .box-text{
                    line-height: 28px;
                    .B3Text-prev,.B3Text-next{
                        width: 40px;
                        height: 40px;
                    }
                    .tit{
                        margin-bottom: 20px;
                        span.cn{
                            padding-left: 80px;
                            font-size:28px;
                            &:after{
                                width: 80px;
                                height: 64px;
                                bottom: -4px;
                            }
                        }
                        span.en{
                            font-size: 18px;
                        }
                    }
                    .text1{
                        margin-bottom: 15px;
                    }
                }
            }
            .boxs{
                li .li-box{
                    .content{
                        width: 280px;
                        .cn{font-size: 26px;}
                        .en{font-size: 18px;}
                        .text{
                            font-size: 12px;
                            line-height: 24px;
                        }
                    }
                    .more{
                        top:40%;
                        margin-left: -85px;
                        .transition-delay(.5s);
                    }
                }
                &.a1 li:nth-child(1) .li-box {
                    .content{top:20px; left: 42%;}
                    .more{top:63%;left:57%}
                }
                &.a5 li:nth-child(1) .li-box .content{bottom:20px;}
            } 
        }
        /*banner4*/
        .banner4{
            .content{
                width: 96%;
                ul{
                    bottom: 0;
                    left:10px;
                    li{
                        .transform(rotate(0deg));
                        .S{
                            >div{
                                .t-box{
                                   .transform(rotate(0deg)); 
                                }
                            }
                            &:nth-child(1){
                                position: absolute;
                                right: -100px;
                                bottom: 180px;
                                z-index: 5;
                            }
                            &.hover{
                                .transform(rotateY(360deg));
                            }
                        }
                        &.l1{
                            left:0px;
                        }
                        &.l2{
                            left:200px;
                        }
                        
                        &.l3{
                            left:400px;
                        }
                        &.l4{
                            left:600px;
                        }
                        &.l5{
                            left:800px;
                        }
                    }
                }
            }
            .B4_detail{
                .margin-box{
                    width: 900px;
                    height: 470px;
                }
                .B4-nav{
                    top:auto;
                    margin-top: 0;
                    bottom: 5%;
                    right: 0;
                    width: 100%;
                    text-align: center;
                    li{
                        margin-right:30px;
                        display: inline-block;
                    }
                }
            }
        } 
        /*banner5*/
        .banner5{
            .ab{
                padding: 20px 40px 0;
            } 
            .video{
                
            }
        }
    } 
    footer > div{
        .foot-box{
            &.box3{
                span{
                    display: block;
                    line-height: 35px;
                }
                img{
                    margin: 0;
                    margin-right: 15px;
                }
            }
            &.box4{
                span{
                    text-align: right;
                    display: block;
                }
            }
        }
    }
    
}
/*ipad vertical*/
@media screen and (max-width:768px){
    /*home-body*/
    .home-body{
        .banner{
            height: 120vw;
        }
        .banner1{
            .round.round1{
                .border-radius(0);
            }
            .logo-b1{
                background-size: 15%;
                .animation(rotateLogo,2.5s,ease,.3s,infinite,normal);
            }
            .banner1-text{
                background-size: 90vh auto; 
            }
        }
        .banner2 .b2-container{
            margin-top: 50px;
        }
        .banner3{
            height: 100vh;
            .B3_detail{
                height: 100%;
                top:0;
                margin-top: 0;
                .in-logo{
                    top:52%;
                    width: 100px;
                }
                .box-img{
                    width: 100%;
                    height: 50%;
                    position: relative;
                    float: none;
                }
                .box-text{
                    height: 50%;
                    width: 100%;
                    padding: 10% 10% 0;
                    float: none;
                    position: relative;
                    &:after{
                        display: none;
                    }
                    .B3Text-prev{
                        left: 3%;
                    }
                }
            }
            .boxs{
                width: 100%;
                left:0;
                li{
                    .transition();
                    .transform(skewX(0));
                    width: 100%;
                    height: 18%;
                    .li-box{
                        .transform(skewX(0));
                        background-size:120% auto;
                        width: 100%;
                        background-position: 10% 0;
                        .more{
                            width: 100px;
                            height: 100px;
                            background-size: 100%;
                            left:auto;
                            right: -20%;
                            top:50%;
                            .transition(all,1s,@ease1,0s);
                        }
                        .content{
                           z-index: 6;
                           width: 60%;
                           left:5%;
                           bottom: auto;
                           top:40px;
                        }
                    }
                }      
                &.a1{
                    left:0; 
                    li:nth-child(1){
                       width: 100%;
                       height: 28%;
                       .li-box{
                           &:after{
                                .opacity(.5,50);
                           } 
                           background-position: 90% 0;
                           .more{
                               left:auto;
                               right: 10%;
                           }
                           .content{
                               left:5%;
                               bottom: auto;
                               top:40px;
                           }
                       }
                    }  
                }   
                &.a2{
                    left:0;
                    li:nth-child(2){
                       width: 100%;
                       height: 28%; 
                       .li-box{
                           &:after{
                                .opacity(.5,50);
                            } 
                           background-position: 90% 0;
                           .more{
                                right: 10%;
                           }
                           .content{
                               left:5%;
                               bottom: auto;
                               top:40px;
                           }
                       }
                    } 
                }   
                &.a3{
                    left:0;   
                    li:nth-child(3){
                       width: 100%;
                       height: 28%; 
                       .li-box{
                           &:after{
                                .opacity(.5,50);
                            } 
                           background-position: 90% 0;
                           .more{
                               right: 10%;
                           }
                           .content{
                               left:5%;
                               bottom: auto;
                               top:40px;
                           }
                       }
                    } 
                }   
                &.a4{
                    left:0;
                    li:nth-child(4){
                        width: 100%; 
                        height: 28%;
                        .li-box{
                            &:after{.opacity(.5,50);} 
                            background-position: 90% 0;
                           .more{
                               right: 10%;
                           }
                           .content{
                               left:5%;
                               bottom: auto;
                               top:40px;
                           }
                        }
                    }    
                }   
                &.a5{
                    left:0; 
                    li:nth-child(5){
                        width: 100%;
                        height: 28%;
                        .li-box{
                            &:after{.opacity(.5,50);} 
                            background-position: 90% 0;
                           .more{
                               left: auto;
                               right: 10%;
                           }
                           .content{
                               left:5%;
                               bottom: auto;
                               top:40px;
                           }
                        }
                    }   
                }        
            }
        }
        .banner4{
            height: auto;
            background-size: auto 100%;
            background-position:50% 0;
            .content{
                height: auto;
                ul{
                    position: static; 
                    width: 480px;   
                    margin: 30px auto;
                    li{
                        position: static;
                        .S{
                            width: 200px;
                            height: 200px;
                            margin-bottom:20px; 
                            &:after{
                                width: 210px;
                                height: 210px;
                            }
                            &.s_more{
                                margin: 0 auto;
                            }
                            &.none{
                                display: none;
                            }
                        }
                        .S:nth-child(1){
                            right:5px;
                            top:-5px;
                        }
                    }
                }
            }
            .B4_detail{
                .margin-box{
                    width: 84%;
                    height: 70%;
                    .content-box .swiper-slide{
                        height: auto;
                        width: 100%;
                        margin: 0;
                        span{
                            font-size: 16px;
                            bottom: 35%;
                            right: 0;
                        }
                        img{
                            height: auto;
                            width: 100%;
                        }
                        &:after{
                            display: none;    
                        }
                        &.swiper-slide-active{
                            .transform(scale(1));
                            img{
                                height: auto;
                                width: 100%;
                            }
                        }
                    }
                    .an1-next,.an1-prev{
                        display: none;
                    }
                }
            }
                
        }
        .banner5{
            height: auto;
            .ab{
                width: 94%;
                margin:0 auto;
                float:none;
                padding: 0;
            }
            .video{
                width: 94%;
                margin:30px auto;
                float: none;
                height: auto;
                video{
                    width: 100%;
                    margin-left: 0;
                }
            }
        }
        
        footer{
            footer > div .foot-logo{
                background-size:100%;
            }
            .foot3{
                display: none;
            }    
        } 
    }
}
/*mobile phone*/
@media screen and (max-width:767px){
    .Tits {
        span.en{
            font-size: 26px;
        }
        span.cn{
            font-size: 18px;
        }   
    }
    /*home-body*/
    .home-body{
        .banner1{
            .banner1-text{
                background-size: 90vw auto;
            }
        }
        .banner2{
            height: auto;
            .Tits{
                margin-top: 0;
            }
            .b2-container{
                width: 94%;
                height: 430px;
                margin:0 auto 10px;
                .banner2-box .swiper-slide .texts{
                    font-size: 12px;
                    line-height: 20px;
                    margin-top:5px;
                }
                .banner2-box .swiper-slide.active .texts{
                    margin-top:5px;
                }
                .swiperB2-next{
                    display: none;
                }
                .swiperB2-prev{
                    display: none;
                }
            }
        }
        .banner3{
            .B3_detail{
                .in-logo{
                    top:32%;
                    width: 70px;
                    right: 5%;
                }
                .detail-off{
                    width: 60px;
                    bottom: 40px;
                }
                .box-img{
                    height: 30%;
                }
                .box-text{
                    line-height: 24px;
                    height: 70%;
                    padding: 12% 4% 0;
                    .tit{
                        margin-bottom: 0;
                        span.cn{
                            font-size: 24px;
                            padding-left:60px; 
                            &:after{
                                width: 60px;
                                height: 48px;
                                bottom: 4px;
                            }
                        }
                        span.en{
                            font-size: 14px;
                        }
                    }
                    .text1{
                        font-size: 12px;
                        margin-bottom: 5px;
                    }
                    .text2{
                        font-size: 12px;
                    }
                    .B3Text-prev,.B3Text-next{display: none;}
                    .B3Text-page{
                        visibility: visible;
                        bottom: 20px;
                        .swiper-pagination-bullet-active{
                           background:#FFB800; 
                        }
                    }
                }
            }
            .boxs li .li-box{
                .content{
                    left:10%;
                    top:50% !important;
                    margin-top: -26px;
                    .text{display: none;}
                    .cn{
                        display: block;
                        &:after{
                            display: none;
                        } 
                    }
                } 
                .more{
                    width: 50px;
                    height: 50px;
                    top:50%;
                    margin-top: -25px;
                }
            } 
        }
        .banner4{
            .Tits{
                margin-top: 0;
            }
            .content{
                width: 94%;
                ul{
                    width: 100%;
                    margin: 0 auto 20px;
                    li .S{
                        width: 43vw;
                        height: 43vw;
                        margin-bottom:4vw; 
                        &:after{
                            width:45vw;
                            height:45vw;
                            top:-1vw;
                            left:-1vw;
                        }
                        &:nth-child(1){
                            right: 0;
                        }
                    }
                    
                }
            } 
            .B4_detail{
                .margin-box{
                    width: 90%;
                    height: 50%;
                }
                .detail-off{
                    bottom: 40px;
                }
                .B4-nav{
                    bottom: 90px;
                    li{
                        line-height: 24px;
                        height: 24px;
                    }
                }
            }
        }
        .banner5 .ab .texts p{
            margin: 0;
            font-size: 12px;
            line-height: 24px;
        }
    }
    footer{
        height: auto;
        padding: 10px 0;
        >div .foot-logo{
            height: 100px;
            background-position:center center;
        }
        >div .foot-box{
            text-align: center;
            &.box2{
                .browser1(align-items,center);
            }
            &.box4{
                .browser1(align-items,center);
                span{
                    text-align: center;
                }
                padding: 10px 0;
            }
        }
    }
    #navToggle{
        right: 20px;
        top:20px;
        height: 28px;
        width: 30px;
        span{
            height: 2px;
            width: 30px;
            &:nth-of-type(2){
                top:13px
            }
        }
        &.expanded span:nth-of-type(1){
            top:11px;
        }
    }
}